Social Sidebar

WordPress Plugin

---

Quickly add CSS3 social links to your WordPress site with this very configurable plugin!

Features

---

WordPress Configuration - Set your links and styles through a settings page in the WordPress admin panel, modify as needed.

Automatic Integration - The link code and stylesheet automatically append to the header and footer of your site's theme using the wp_head and wp_footer functions.

HTML5 / CSS3 - Works on all the newest browsers, properly tagged and contains transitions.

129 Icons - Choose from 129 icons derived from a number of online services and several general icons to create the perfect sidebar for your site.

4 Themes - Default, light, transparent, and color themes available.

2 Sides - Set your bar on the left or right side of the page.

2 Styles - Defaults to blocks on the side, but you can also set the style to show circles.

4 Label Styles - Square, curved, rounded, and fancy label styles for just the right fit when the icons are moused over.

General Display Options - Choose from general page and post types to display the bar on (or not) as well as a manual mode for more customized integration.

Share Links - Share your site pages out with this link type and choose from a wide array of services powered by AddThis.com. Sharing defaults, overrides, and AddThis Publisher ID options also available.

Mobile Display - Choose to hide or turn the sidebar into buttons and at what width to make the sidebar more mobile friendly.

Custom Colors - Set your own custom color scheme for the sidebar links so you can build the sidebar you want.

Installation

---

Configuration

---

Configuring the plugin is easy, just head to the "Social Sidebar" section under your WordPress settings, select / fill out any options you see fit and hit the "Save Changes" button.

Here's a quick rundown of available options:

Sidebar Position

Left - Positions the bar on the left side of the page.

Right - Positions the bar on the right side of the page.

Sidebar Theme

Dark - Links are white on a dark background.

Light - Light gray background on the links, semi-dark color.

Transparent - No background on the links, icon color is semi-transparent black.

Color - Every link has its own corresponding color.

Sidebar Links Size

Small - Default sidebar link size.

Large - Increase the overall link size and text.

Sidebar Links Style

Square - Default link style. Square links on the side as a bar.

Circle - Links become circular and seperated from the side wall.

Link Label Style

Square - Label is a square block.

Curved - Label has slightly rounded corners on the end (5px).

Rounded - Label has very rounded corners on the end (25px).

Fancy - Label resembles a nice tag and uses CSS3 transforms and selectors.

Box Shadow

None - No applied box shadow to any element.

Apply to Bar - Gives the overall sidebar a box-shadow.

Apply to Links - Gives every link in the list a box-shadow.

Corners

None - No additional border-radius applied to any element.

Apply to Bar - The first and last link round off on the top and bottom edges respectivly.

Apply to Links - Every link has rounded top and bottom corners on the side facing out.

Sidebar Links

Click the "Add Link" button to create a new entry. Fill out the name field, select either a link or share type, fill out the appropriate URL / sharing service field, then switch tabs and pick your icon. Save the link to the list and remember to save your settings.

Display Settings

General Display - A number of post / page options are available for a general selection of where to display the sidebar. For selections that require even deeper integration or post by post display, check out the manual mode option.

HTML5 Tags - An HTML5 tags option is available to switch from using the aside tag to a div for better backwards compatability.

Mobile Display

Setting up the mobile display options is a snap. Simply enable the mobile display, select the type of action you want the sidebar to perform in mobile, and set the page width for that action as a number.

Custom Colors

Standard themes not cutting it for your site and you want better control? No problem. Head over to the custom colors panel, select your sidebar foreground and background colors (plus hover colors) then select the enable custom colors option. Save the settings and see how well your sidebar fits in now!

Custom CSS

There is a custom CSS option available for style fixes and tweaks to the sidebar. This code will appear directly above the sidebar HTML output to "close the gap" and make sure the style overrides perform well.

Support

---

Having trouble with the style code?

Please check out our Support Page.

If you have any feedback or suggestions on improving the plugin, please let us know via our Contact Form.

Credits

---

IcoMoon - Font icons used in the sidebar links.

Change Log

---

Version 1.0.3

Version 1.0.2

Version 1.0.1

Version 1.0.0